<template>
    <div id="category">
        <!--  头部 -->
        <Header />
        <!-- 内容 -->
         <div class="listWrapper" v-if="!showLoading">
             <!-- 左边 -->
             <div class="leftWrapper">
                  <van-sidebar v-model="activeKey">
                    <van-sidebar-item title="蔬菜水果" to="/dashboard/category/contentView/0"/>
                    <van-sidebar-item title="肉类(鲜活)" to="/dashboard/category/contentView/1"/>
                    <van-sidebar-item title="熟食豆制" to="/dashboard/category/contentView/2"/>
                    <van-sidebar-item title="米面粮油" to="/dashboard/category/contentView/3"/>
                  </van-sidebar>
             </div>

             <!-- 右边 -->
             <div class="rightWrapper"><router-view /></div>

         </div>
         <van-loading
              v-else
              type="spinner"
              color="#75a342"
              style="position:absolute;left: 50%;top: 40%;transform:translate(-50%)"
          >
                  正在努力加载中....
         </van-loading>
    </div>
</template>

<script>
   //1.引入組件
     import Header from './components/Header'
     import ContentView from './components/ContentView'
    //2.引入滑动组件
    import BScroll from 'better-scroll'
    import { Sidebar, SidebarItem } from 'vant';  
    import { Notify } from 'vant';
    //3.引入接口
    import { getHomeData,getVegetables} from './../../service/api/index.js'    //getHomeData,getVegetables是两个方法，通过这两个方法请求数据

      //4.引入通知插件
    import PubSub from 'pubsub-js'
    import { Toast } from 'vant';

        //5.引入vuex
    import  {mapMutations} from 'vuex'

     export default{
         name:"Category",
       
          data(){
            return {
               //是否显示加载图标
               showLoading:true,
               //右边列表数据
               category_list:[],
               //侧边导航索引
               activeKey:0
             }
          },

        created(){

             //请求网络数据   调用getVegetables返回promise对象，然后可以调用promise的then方法，返回请求到的数据(response.data)  
                  getVegetables().then((response)=>{
                  // console.log(response);
                  if (response.success) {
                       //导航分类数据
                       this.category_list = response.data.pzleixing_list;
                       //console.log(this.category_list);
                     //隐藏加载动画
                     this.showLoading = false;
                  }
             }).catch(error=>{
                   // todo......
                  console.log(error);
             })   //---catch
        }, // ----created


         components:{
            Header,
            ContentView
         },
        
         mounted(){
         // //订阅消息，(添加到购物车的消息)
         //   PubSub.subscribe('categoryAddToCart',(msg,goods)=>{

         //          if (msg ==='categoryAddToCart') {
         //               this.ADD_GOODS({  
         //                   goodsId:goods.id,
         //                   goodsName:goods.name,
         //                   smallImage:goods.small_image,
         //                   goodsPrice:goods.price
         //               });
         //               //提示用户
         //               Toast({
         //                  message:'添加到购物车成功',
         //                  duration:800
         //               });
         //          }
         //   })
        },
    
         methods:{
          ...mapMutations(["ADD_GOODS"]),  //拿到mutations.js  里面的ADD_GOODS方法,记得先导入      import  {mapMutations}  from 'vuex'
           //1.初始化操作(数据和界面)
            async initData(){

                   let rightRes = await getCategoriesDetail('/lk001');
              
              },   //--async initData

         },

    }

</script>
<style  lang="less"scoped>
   #category{
     width:100%;
     height:100%;
     background-color:#f5f5f5;
     overflow:hidden;
   }

   .listWrapper{
      position:absolute;
      top:2.75rem;
      bottom:3rem;
      width:100%;
      overflow:hidden;
   }

    .leftWrapper {
        float: left;
        background-color: #F4F4F4;
        width: 5.3125rem;
    }


    .categoryItem {
        padding: 0.75rem 0;
        border-bottom: solid 1px #E8E9E8;
        position: relative;
    }

    .categoryItem .textWrapper {
        line-height: 1.25rem;
        border-left: solid 0.1875rem transparent;
        padding: 0.3125rem 0.6875rem;
        font-size: 0.8125rem;
        color: #666666;
    }

    .categoryItem.selected {
        background: #FFF;
    }

    .categoryItem.selected .textWrapper {
        border-left-color: #3cb963;
        font-weight: bold;
        font-size: 0.875rem;
        color: #333333;
    }

    @media (min-width: 960px) {
        .wrapper {
            border-right: 1px solid #E8E9E8;
        }

        .wrapper .categoryItem {
            background: #fff;
        }
    }

</style>